<template>
    <div class="container" :style="{minHeight:screenHeight}">
      <div class="item-box" v-for="(item,index) in listData" :key="index" @click="fnPageSkip(item.id)">
        <div class="item-box-header">
          <div class="item-box-header-details">
            <div class="item-box-header-icon">
              <img :src="item.avatarUrl">
            </div>
            <div class="item-box-header-userDetails">
              <div>
                <p style="font-size: 28rpx;color: #282828;font-weight: 500">
                  <span>{{ item.userName }}</span>
                  <span>（<span style="font-size: 28rpx;color: #24C682;">{{ item.signLevel }}</span>）</span>
                </p>
                <p style="font-size: 22rpx;color: #999999">{{ item.modifyTime }}</p>
              </div>
              <div>
                <p style="margin-right: 30rpx">
                  总能量：{{ item.signTotalCount }}
                </p>
                <p>本周打卡{{ item.weekSignCount }}次</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box-content">
          <div class="item-box-content-title">
            <p>类型：{{ item.type }}</p>
            <p>年龄：{{ item.age }}</p>
            <p>体重：{{ item.weight }}KG</p>
          </div>
          <p class="target">
            目标：{{ item.content }}
          </p>
          <div class="item-box-content-imgs">
            <div class="item-box-content-img" v-for="(myItem,myIndex) in item.fileList" :key="myIndex">
              <img mode="widthFix" :src="myItem.webPath">
            </div>
          </div>
          <div class="item-box-content-options" v-if="item.isNowSign == 1">
            <p class="content-options-collect" @click.stop="fnDelate(item.id)">
              <img src="../../../static/image/delate.png">
              <span class="optionNum">删除</span>
            </p>
            <p class="content-options-comment" @click.stop="fnEdit(item.id)">
              <img src="../../../static/image/edit.png">
              <span class="optionNum">修改</span>
            </p>
          </div>
        </div>
      </div>
      <i-load-more :tip="tip" :loading="lodingShow" />
      <i-message id="message" />
    </div>
</template>
<script>
  const { $Message } = require('../../../static/iview/base/index');
    export default {
        name: '',
        data(){
            return {
              userInfo:'',  //用户数据
              screenHeight: (Number(wx.getSystemInfoSync().windowHeight) - 49) + 'px',
              lodingShow:true,
              pageNum:1,   //列表数据默认请求第一个
              sizeTotal:'',  //列表的所有的页数
              listData:[],  //列表数据
              tip:'数据加载中'
            }
        },
      methods:{

        //获取列表数据
        getHomePageList(){
          this.$httpWX.post({
            url: '/sign/getSignList',
            data: {
              pageNum:this.pageNum,
              pageSize:2,
              userId:this.userInfo.id
            }
          }).then(res => {
            if(res.code == 0){
              console.log(res.data.content);
              this.sizeTotal = res.data.pageinfo.totalPages;
              //判断是否有评论数据
              if(res.data.content.length == 0){
                this.lodingShow = false;
                this.tip = '暂无记录';
                return false;
              }
              if(this.pageNum == 1){
                this.listData=[];
                this.listData = res.data.content;
                console.log(this.listData);
                this.lodingShow = false;
                this.tip = '数据加载完成';
              } else {
                res.data.content.forEach((val)=>{
                  this.listData.push(val);
                  this.lodingShow = false;
                  this.tip = '数据加载完成';
                });
              }
            }
          });
        },

        //点击签到列表，跳转签到详情
        fnPageSkip(id){
          wx.navigateTo({
            url: '../rankingDetails/main?type=homePage&id='+ id
          })
        },

        //点击删除
        fnDelate(id){
          console.log("删除");
          this.$httpWX.post({
            url: '/sign/delSign',
            data: {
              id:id
            }
          }).then(res => {
            console.log(res);
            if(res.code === 500){
              $Message({
                content: res.msg,
                type: 'error'
              });
            } else {
              $Message({
                content: res.msg,
                type: 'success'
              });
              this.pageNum = 1;
              this.getHomePageList();
            }
          });
        },

        //点击修改
        fnEdit(id){
          console.log("修改");
          wx.navigateTo({
            url: '../registration/main?type=edit&id='+ id
          })
        }
      },
      mounted(){
        this.userInfo = wx.getStorageSync('userInfo');
        this.pageNum = 1;
        this.getHomePageList();
      },

      //用户下拉刷新事件
      onReachBottom(){
        this.pageNum++;
        this.lodingShow = true;
        this.tip = '数据加载中';
        if(Number(this.pageNum) <= Number(this.sizeTotal)){
          this.getHomePageList();
        } else{
          this.lodingShow = false;
          this.tip = '已经到底啦'
        }
      }
    }
</script>

<style>
  .container{
    width: 100%;
    background-color: #F7F7F7;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  /*列表数据*/
  .item-box{
    width: 94.67%;
    /*height: 602rpx;*/
    margin: 20rpx auto 20rpx auto;
    padding-bottom: 20rpx;
    background-color: white;
    box-shadow:0px 3px 15px 0px rgba(110,128,134,0.1);
    border-radius:10px;
  }
  .item-box-header{
    width: 93%;
    height: 153rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid rgba(231,231,231,1);
    display: flex;
    align-items: center;
  }
  .item-box-header-details{
    width: 100%;
    height: 100rpx;
    display: flex;
  }
  .item-box-header-icon{
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 27rpx;
  }
  .item-box-header-icon>img{
    width: 100%;
    height: 100%;
  }
  .item-box-header-userDetails{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .item-box-header-userDetails>div:nth-of-type(1){
    display: flex;
    justify-content: space-between;
  }
  .item-box-header-userDetails>div:nth-of-type(2){
    display: flex;
    margin-top: 15rpx;
    color: #282828;
    font-size: 24rpx;
  }
  .item-box-content{
    width: 93%;
    margin: 30rpx auto 0 auto;
  }
  .item-box-content-title{
    display: flex;
  }
  .item-box-content-title>p{
    flex: 1;
    color: #999999;
    font-size: 24rpx;
  }
  .item-box-content-title>p:nth-of-type(2){
    text-align: center;
  }
  .item-box-content-title>p:nth-of-type(3){
    text-align: right;
  }
  .target{
    font-size:28rpx;
    font-weight:400;
    color:rgba(40,40,40,1);
    line-height:40rpx;
    margin: 24rpx 0 29rpx 0;
  }
  .item-box-content-imgs{
    display: flex;
    /*justify-content: space-around;*/
  }
  .item-box-content-img{
    width: 212rpx;
    margin-right: 10rpx;
    overflow: hidden;
  }
  .item-box-content-img>img{
    width: 100%;
    /*height: 100%;*/
  }
  .item-box-content-options{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20rpx;
  }
  .content-options-collect,.content-options-comment{
    display: flex;
    align-items: center;
  }
  .content-options-comment{
    margin-left: 50rpx;
  }
  .content-options-collect>img{
    width: 24rpx;
    height: 28rpx;
  }
  .content-options-comment>img{
    width: 27rpx;
    height: 25rpx;
  }
  .optionNum{
    display: inline-block;
    margin-left: 14rpx;
    font-size: 22rpx;
    color: #999999;
  }
</style>
